<template>
  <div class="login">
    <van-nav-bar
      title="登陆页"
      class="header"
    />
    <br />
    <br />
    <van-cell-group>
      <van-field
        v-model="user"
        required
        label="用户名"
        placeholder="请输入用户名"
      />
      <van-field
        v-model="pwd"
        type="password"
        required
        label="密码"
        placeholder="请输入密码"
      />
    </van-cell-group>
    <br />
    <br />
    <van-button type="primary" block @click='login'>登陆</van-button>
  </div>
</template>

<script>
import { Toast } from 'vant';

export default {
  name: 'Login',
  data() {
    return {
      user: '',
      pwd: ''
    }
  },
  methods: {
    // 点击登录按钮
    login() {
      Toast.loading('加载中...', 0);
      setTimeout(() => {
        // 存在内容的时候
        if(this.user == '123' && this.pwd == '123') {
          Toast.success({
            message: '亲爱的小姐姐，你真棒，这都能记住，不愧你长的这么好看！',
            duration: 5000,
            onClose: () => {
              // 1. 种下 token
              sessionStorage.setItem('TOKEN', this.user);
              // 2. 跳转页面
              this.$router.push('/index/home');
            }
          });
        } else {
          Toast.success({
            message: '你真是个垃圾，这么简单的密码都记不住，畜生！！！',
            duration: 5000
          });
        }
      }, 2000);
    }
  }
}
</script>

<style lang='scss'>
.header {
  background-image: linear-gradient(90deg,#0af,#0085ff);
  color: #fff;
  .van-nav-bar__text, .van-nav-bar__arrow, .van-nav-bar__title {
    color: #fff;
  }
}
</style>
